<template>
    <div class="app-container">
      <div class="mainbox">
        <div class="filter-container">
          <el-form :model="form" ref="form" label-width="80px">
            <el-row>
              <el-col :span="5">
                <el-form-item label="应用系统">
                  <el-select v-model="form.appId" placeholder="请选择应用系统" clearable>
                    <el-option
                      v-for="item in appList"
                      :key="item.appId"
                      :label="item.appName"
                      :value="item.appId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="用户名">
                  <el-input v-model="form.realName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="账号">
                  <el-input v-model="form.account"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="是否启用">
                  <el-select v-model="form.isEnable" placeholder="请选择是否启用" clearable>
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <div style="float: right;">
                  <el-button type="primary" icon="el-icon-search" @click="qryDetails">搜索</el-button>
                  <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="table-container table-fullscreen">
          <el-table :data="details" ref="table" :v-loading="loading" border>
            <el-table-column label="应用系统" prop="systemName" show-overflow-tooltip align="center" />
            <el-table-column label="用户名" prop="realName" show-overflow-tooltip align="center" />
            <el-table-column label="账号" prop="account" show-overflow-tooltip align="center" />
            <el-table-column label="是否启用" prop="isEnable" show-overflow-tooltip align="center" >
              <template slot-scope="{row}">
                <el-switch
                  :value="row.isEnable"
                  :active-value="'1'"
                  :inactive-value="'2'"
                  @change="changeEnable(row.isEnable,row)"
                />
              </template>
            </el-table-column>
            <el-table-column label="是否授权" prop="isAuth" show-overflow-tooltip align="center" >
              <template slot-scope="{row}">
                <el-switch
                  :value="row.isAuth"
                  :active-value="'1'"
                  :inactive-value="'2'"
                  @change="changeAuth(row.isAuth,row)"
                />
              </template>
            </el-table-column>
            <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip align="center" />
            <el-table-column label="操作" show-overflow-tooltip align="center" >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="showDetail(scope.row)"
                >用户详情</el-button>
              </template>
            </el-table-column>
          </el-table>

          <dt-pagination
            v-show="total>0"
            :total="total"
            :page.sync="form.pageNo"
            :limit.sync="form.pageSize"
            @pagination="qryList"
          />
        </div>
        <!-- 用户详情 -->
        <el-dialog
          title="用户详情"
          :visible.sync="dialogVisible"
          width="800px"
        >
        <el-form :model="dialogForm" ref="dialogForm" label-width="80px">
            <el-row>
              <el-col :span="11">
                <el-form-item label="用户名">
                  <el-input v-model="dialogForm.realName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="账号">
                  <el-input v-model="dialogForm.account" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="性别">
                  <el-input v-model="dialogForm.sex" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="身份证号">
                  <el-input v-model="dialogForm.idCard" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="所属组织">
                  <el-input v-model="dialogForm.orgName" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table :data="gridData" border v-loading="dialogLoading">
            <el-table-column property="systemName" label="业务系统" align="center" />
            <el-table-column property="isEnable" label="是否启用" align="center" >
              <template slot-scope="{row}">
                <el-switch
                  :value="row.isEnable"
                  :active-value="'1'"
                  :inactive-value="'2'"
                  @change="changeEnableDialog(row.isEnable,row)"
                />
              </template>
            </el-table-column>
            <el-table-column property="isAuth" label="授权状态" align="center" >
              <template slot-scope="{row}">
                <el-switch
                  :value="row.isAuth"
                  :active-value="'1'"
                  :inactive-value="'2'"
                  @change="changeAuthDialog(row.isAuth,row)"
                />
              </template>
            </el-table-column>
          </el-table>


          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
            <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
          </span>
        </el-dialog>
      </div>
    </div>
</template>

<script>
import {getAppMagList} from '@/framework/api/applicationMag/applicationMag'
import userApi from '@/api/user/userApi'
// import store from '@/store'

export default {
  name: 'appAuthUser',
  data () {
    return {
      details: [],
      gridData:[],
      appList:[],
      form:{
        appId:'',
        realName:'',
        account:'',
        isEnable:'',
        pageNo: 1,
        pageSize: 10,
      },
      dialogForm:{

      },
      dialogVisible: false,
      dialogLoading: false,
      loading: false,
      total:0,
      userId:null,
    }
  },
  created(){
    this.initAppList();
    this.qryList();
  },
  methods: {
    initAppList(){
      //查询应用系统集合
      getAppMagList().then(res=>{
        //添加业务系统后放开
        // userApi.qryApp(this.$store.getters.roles).then(result=>{
        //     const appCodes=result.data;
        //     appCodes.forEach(item=>{
        //       res.data.forEach(vo=>{
        //         if(vo.appCode == item){
        //           this.appList.push(vo);
        //         }
        //       })
        //     })
        // })
        this.appList=res.data
      })
    },
    /** 重置按钮操作 */
    handleReset() {
      this.form.appId='';
      this.form.realName='';
      this.form.account='';
      this.form.isEnable='';
      this.form.pageSize=10;
      this.qryDetails();
    },
    qryDetails(){
      this.form.pageNo=1;
      this.qryList();
    },
    qryList(){
      this.loading=true;
      this.form.systemId=this.form.appId;
      console.info("this.form=",this.form);
      userApi.qryAppAuthUser(this.form).then(res=>{
        this.details=res.data.records
        this.total=res.data.total
        this.loading=false;
      }).catch(res=>{
        this.$message.error(res.message)
        this.loading=false;
      })
    },
    changeEnableDialog(flag,row){
        this.changeEnable(flag,row);
        this.qryAppByUser();
    },
    changeEnable(flag,row){
      this.loading=true;
      const isEnable = (flag === '1' ? '2' : '1')
      const params = {
        isEnable: isEnable,
        id: row.id
      }
      userApi.updAppEnable(params).then(res=>{
        this.$message.success("启用状态已修改")
        this.qryList();
      }).catch(res=>{
        this.$message.error(res.message)
        this.loading=false;
      })
    },
    changeAuthDialog(flag,row){
        this.changeAuth(flag,row);
        this.qryAppByUser();
    },
    changeAuth(flag,row){
      this.loading=true;
      const isAuth = (flag === '1' ? '2' : '1')
      const params = {
        isAuth: isAuth,
        id: row.id
      }
      userApi.updAppAuth(params).then(res=>{
        this.$message.success("授权状态已修改")
        this.qryList();
      }).catch(res=>{
        this.$message.error(res.message)
        this.loading=false;
      })
    },
    showDetail(row){
      this.userId=row.userId;
      this.qryAppByUser();
      this.dialogForm=row;
      this.dialogVisible=true;
    },
    qryAppByUser(){
      this.dialogLoading=true;
      userApi.qryAppByUser(this.userId).then(res=>{
        this.gridData=res.data
        this.dialogLoading=false;
      }).catch(res=>{
        this.$message.error(res.message)
        this.dialogLoading=false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
